<template>
  <view class="order-page">
    <!-- 顶部tab -->
    <view class="order-tabs">
      <view class="order-tab" :class="{active: activeTab === 0}" @click="activeTab = 0">进行中</view>
      <view class="order-tab" :class="{active: activeTab === 1}" @click="activeTab = 1">已完成</view>
    </view>
    <!-- 筛选栏 -->
    <view class="order-filter-bar">
      <view class="order-filter-left">
        <text class="order-filter-label">维修方式</text>
        <view class="custom-select">
          <view class="custom-select-btn" @click="showWayDropdown = !showWayDropdown">
            <text>{{ways[wayIndex]}}</text>
            <text class="custom-select-arrow">▼</text>
          </view>
          <view v-if="showWayDropdown" class="custom-select-dropdown">
            <view v-for="(way, idx) in ways.slice(1)" :key="way" class="custom-select-option" :class="{active: wayIndex === idx+1}" @click="selectWay(idx+1)">{{way}}</view>
          </view>
        </view>
      </view>
      <view class="order-filter-right" @click="showDatePicker = true">
        <text class="order-date-icon">📅</text>
        <text class="order-filter-label">预约日期</text>
      </view>
    </view>
    <view v-if="showDatePicker" class="date-picker-modal" @click.self="showDatePicker = false">
      <view class="date-picker-panel2">
        <view class="date-picker-row2">
          <text class="date-picker-label2">开始时间</text>
          <picker mode="date" :value="startDate" @change="onStartDateChange">
            <view class="date-picker-value2">{{formatDate(startDate)}}</view>
          </picker>
          <picker mode="time" :value="startTime" @change="onStartTimeChange">
            <view class="date-picker-value2">{{startTime}}</view>
          </picker>
        </view>
        <view class="date-picker-row2">
          <text class="date-picker-label2">结束时间</text>
          <picker mode="date" :value="endDate" @change="onEndDateChange">
            <view class="date-picker-value2">{{formatDate(endDate)}}</view>
          </picker>
          <picker mode="time" :value="endTime" @change="onEndTimeChange">
            <view class="date-picker-value2">{{endTime}}</view>
          </picker>
        </view>
      </view>
    </view>
    <!-- 订单列表 -->
    <view class="order-list">
      <view class="order-card" v-for="(item, i) in filteredOrders" :key="i">
        <view class="order-row"><text class="order-label">维修单号：</text>{{item.id}}</view>
        <view class="order-row"><text class="order-label">维修方式：</text>{{item.type}}</view>
        <view class="order-row"><text class="order-label">预约日期：</text>{{item.date}}</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'

// 响应式数据
const activeTab = ref(0)
const ways = ref(['全部', '到店维修', '上门取车'])
const wayIndex = ref(0)
const showWayDropdown = ref(false)
const orders = ref([
  {id: '3535252', type: '到店维修', date: '2022/11/10 11:00', status: 0},
  {id: '3535252', type: '上门取车', date: '2022/11/10 11:00', status: 0},
  {id: '3535252', type: '到店维修', date: '2022/11/10 11:00', status: 1},
])
const showDatePicker = ref(false)
const startDate = ref('2023-03-02')
const startTime = ref('17:00')
const endDate = ref('2023-03-12')
const endTime = ref('17:00')

// 计算属性
const filteredOrders = computed(() => {
  return orders.value.filter(o => {
    const matchTab = o.status === activeTab.value
    const matchWay = wayIndex.value === 0 || o.type === ways.value[wayIndex.value]
    return matchTab && matchWay
  })
})

// 方法
const selectWay = (idx) => {
  wayIndex.value = idx
  showWayDropdown.value = false
}

const onStartDateChange = (e) => {
  startDate.value = e.detail.value
}

const onStartTimeChange = (e) => {
  startTime.value = e.detail.value
}

const onEndDateChange = (e) => {
  endDate.value = e.detail.value
}

const onEndTimeChange = (e) => {
  endTime.value = e.detail.value
}

const formatDate = (date) => {
  if (!date) return ''
  const arr = date.split('-')
  return `${arr[0]}年${arr[1]}月${arr[2]}日`
}
</script>

<style>
.order-page {
  background: #f7f7f7;
  min-height: 100vh;
  font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}
.order-tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #238aff;
  padding-top: 20rpx;
}
.order-tab {
  color: #b3d2ff;
  font-size: 32rpx;
  margin: 0 40rpx;
  padding-bottom: 16rpx;
  font-weight: 500;
  position: relative;
}
.order-tab.active {
  color: #fff;
  font-weight: bold;
}
.order-tab.active::after {
  content: '';
  display: block;
  margin: 0 auto;
  margin-top: 8rpx;
  width: 44rpx;
  height: 4rpx;
  background: #fff;
  border-radius: 2rpx;
}
.order-filter-bar {
  background: #fff;
  border-radius: 16rpx;
  margin: 24rpx 24rpx 0 24rpx;
  padding: 40rpx 24rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  box-shadow: 0 2rpx 8rpx rgba(35,138,255,0.06);
  justify-content: space-between;
}
.order-filter-label {
  color: #666;
  font-size: 28rpx;
}
.order-filter-select {
  background: #f2f6fa;
  border-radius: 12rpx;
  border: none;
  padding: 0 32rpx 0 24rpx;
  height: 44rpx;
  color: #238aff;
  font-size: 26rpx;
  margin-left: 0;
  outline: none;
  appearance: none;
}
.order-list {
  margin: 24rpx 0 0 0;
  padding: 0 16rpx;
}
.order-card {
  background: #fff;
  border-radius: 18rpx;
  margin-bottom: 18rpx;
  padding: 36rpx 32rpx 28rpx 32rpx;
  box-shadow: 0 2rpx 8rpx rgba(35,138,255,0.06);
}
.order-row {
  font-size: 34rpx;
  color: #444;
  margin-bottom: 16rpx;
}
.order-label {
  color: #888;
  font-size: 30rpx;
}
.order-date-icon {
  font-size: 28rpx;
  margin-right: 8rpx;
}
.date-picker-modal {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.18);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.date-picker-panel2 {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx 18rpx 18rpx 18rpx;
  min-width: 320rpx;
  box-shadow: 0 2rpx 16rpx rgba(0,0,0,0.08);
}
.date-picker-row2 {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}
.date-picker-label2 {
  width: 100rpx;
  color: #444;
  font-size: 26rpx;
  font-weight: 500;
}
.date-picker-value2 {
  background: #f2f2f2;
  border-radius: 22rpx;
  padding: 0 22rpx;
  height: 60rpx;
  line-height: 40rpx;
  color: #444;
  font-size: 24rpx;
  margin-right: 12rpx;
  margin-left: 8rpx;
  min-width: 160rpx;
  text-align: center;
  display: flex;
  align-items: center;
}
.custom-select {
  position: relative;
  display: inline-block;
  margin-left: 16rpx;
}
.custom-select-btn {
  background: #238aff;
  color: #fff;
  border-radius: 12rpx;
  padding: 15rpx 18rpx;
  height: 38rpx;
  display: flex;
  align-items: center;
  font-size: 25rpx;
  font-weight: 500;
  cursor: pointer;
}
.custom-select-arrow {
  font-size: 22rpx;
  margin-left: 4rpx;
}
.custom-select-dropdown {
  position: absolute;
  left: 0;
  top: 70rpx;
  background: #fff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(35,138,255,0.10);
  min-width: 80rpx;
  z-index: 100;
  padding: 4rpx 0;
}
.custom-select-option {
  padding: 8rpx 18rpx;
  color: #222;
  font-size: 22rpx;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}
.custom-select-option.active {
  color: #238aff;
  font-weight: bold;
  background: #f2f6fa;
}
</style> 